<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.js"></script>
	</head>
	<body>
		<div id="demo">
			<!-- 输入框 -->
			<input type="text" v-model="message" placeholder="edit me" />
			<p>input message is: {{message}}</p>
			<!-- 多行输入框 -->
			<textarea v-model="message2" placeholder="say something"></textarea>
			<p>textarea message is :{{message2}}</p>
			<!-- 复选框 -->
			<input type="checkbox" id="chk1" value="chk1" v-model="checknames" />
			<label for="chk1">chk1</label>
			<input type="checkbox" id="chk2" value="chk2" v-model="checknames" />
			<label for="chk2">chk2</label>
			<input type="checkbox" id="chk3" value="chk3" v-model="checknames" />
			<label for="chk3">chk3</label>
			<p>复选框选中项为：{{checknames}}</p>
			<input type="radio" id="rd1" value='rd1' v-model="radioNames" />
			<label for="rd1">rd1</label>
			<input type="radio" id="rd2" value='rd2' v-model="radioNames" />
			<label for="rd2">rd2</label>
			<p>单选框选中项为{{radioNames}}</p>
			<select v-model="selected">
				<option disabled value="">请选择</option>
				<option v-for="option in options" v-bind:value='option.value'>{{option.text}}</option>
			</select>
			<span>下拉框选中项：{{selected}}</span>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#demo",
				data: {
					message: "input test",
					message2: "multiple text test",
					checknames: ['chk1', 'chk2', 'chk3'],
					radioNames: 'rd2',
					options: [{
							text: 'One',
							value: 'A'
						},
						{
							text: 'Two',
							value: 'B'
						},
						{
							text: 'Three',
							value: 'C'
						}
					],
					selected: ''
				}
			})
		</script>

	</body>
</html>
